<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Top5 数据</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.6/theme-chalk/index.css">
    <style>
        .ul_listIn {
            display: flex;
            flex-direction: column;
            width: 100%;
        }
        .ul_con {
            list-style: none;
            padding: 0;
            margin: 0 0;
            font-size: 0.75rem;
            color: #ffeb7b;
            display: flex;
            flex-direction: row;
            justify-content: space-between; /* Adjust spacing between items */
            width: 100%;
            height: 2rem;
        }
        .ul_title {
            display: flex;
            justify-content: space-between; /* Adjust spacing between items */
            list-style: none;
            font-size: 0.75rem;
            color: #5d5ddd;
            padding: 0;
            margin-bottom: 10px;
            width: 100%;
        }
        .ul_title li, .ul_con li {
            text-align: center;
            padding: 0; /* Remove padding */
            margin: 0; /* Remove margin */
        }
        .ul_title li:nth-child(1), .ul_con li:nth-child(1) {
            flex: 0.9; /* 10% */
        }
        .ul_title li:nth-child(2), .ul_con li:nth-child(2) {
            flex: 7.3; /* 60% */
        }
        .ul_title li:nth-child(3), .ul_con li:nth-child(3) {
            flex: 2; /* 30% */
        }
        h3 {
            display: flex;
            justify-content: center; /* Center horizontally */
            font-size: 1.5rem;
            color: #fff;
            margin-bottom: 0.5rem;
        }
    </style>
</head>
<body>
<div class="rightMain">
    <div class="rightMain_bottom">
        <div class="rightMain_bottomIn">
            <div class="biaoge biaoge_list" style="width:100%; height:36vh">
                <div class="biaoge_listIn">
                    <ul class="ul_title">
                        <li>排名</li>
                        <li>站点名称</li>
                        <li>用电量/度</li>
                    </ul>
                    <div class="ul_list">
                        <div class="ul_listIn" id="top5-data">
                            <!-- 数据将通过 JavaScript 动态插入 -->
                        </div>
                    </div>
                </div>
            </div>
            <span class="border_bg_leftTop"></span>
            <span class="border_bg_rightTop"></span>
            <span class="border_bg_leftBottom"></span>
            <span class="border_bg_rightBottom"></span>
        </div>
    </div>
</div>
<script>
    // 模拟从后端获取数据
    fetch('https://32faea8a.r5.cpolar.top/chargeStation/getEverydayTop5')
        .then(response => response.json())
        .then(data => {
            if (data.code === 200) {
                const top5Data = data.data;
                const ulListIn = document.getElementById('top5-data');
                const rows = [
                    { rank: 1, stationName: top5Data.top1StationName, power: top5Data.top1Power },
                    { rank: 2, stationName: top5Data.top2StationName, power: top5Data.top2Power },
                    { rank: 3, stationName: top5Data.top3StationName, power: top5Data.top3Power },
                    { rank: 4, stationName: top5Data.top4StationName, power: top5Data.top4Power },
                    { rank: 5, stationName: top5Data.top5StationName, power: top5Data.top5Power }
                ];
                rows.forEach(row => {
                    const ul = document.createElement('ul');
                    ul.className = 'ul_con';
                    ul.innerHTML = `
                        <li>${row.rank}</li>
                        <li>${row.stationName}</li>
                        <li>${row.power}</li>
                    `;
                    ulListIn.appendChild(ul);
                });
            }
        })
        .catch(error => console.error('Error fetching data:', error));
</script>
</body>
</html>
